// 定义导航栏数据（写死的数据）
const navItems = [
    { name: '首页树编辑', link: '/view/cardMenu' },
    { name: '视频树编辑', link: '/view/videoMenu' },
    { name: '考情编辑', link: '/view/videoMenuIntro' },
    { name: '标签列表', link: '/view/tag' },
    { name: '考试列表', link: '/view/exam' },
    { name: '问题列表', link: '/view/question' },
    { name: '材料列表', link: '/view/materials'},
    { name: '问题反馈', link: '/view/feedback'},
    { name: '渠道管理', link: '/view/channel'},
    { name: '支付管理', link: '/view/payConfig'},
    { name: '支付订单(未完成)', link: '/view/orderList'},
    { name: 'VIP时长组配置', link: '/view/vipGroupConfig'},
    { name: '广播配置', link: '/view/broadcast'},
    { name: '错题报告', link: '/view/reportQuestion'},
    { name: 'xmind管理', link: '/view/xmindLogList'},
];

// 题库列表数据
const examBankList = [
    { examBankId: 101, name: "江苏事业编" },
    { examBankId: 201, name: "国考" },
    { examBankId: 301, name: "安徽省考" }
];

// 创建 Ant Design 风格的布局组件
const AntdLayoutComponent = {
    template: `
    <div class="antd-layout">
        <!-- 顶部导航栏 -->
        <header class="antd-header">
            <div class="antd-header-left">
                <button class="antd-menu-toggle" @click="toggleMobileMenu">
                    <i class="bi bi-list"></i>
                </button>
                <div class="antd-header-logo">
                    考试管理系统
                </div>
            </div>
            <div class="antd-header-right">
                <div class="antd-header-exam-selector">
                    <label for="exam-bank-select">选择题库：</label>
                    <select id="exam-bank-select" v-model="selectedExamBankId" @change="onExamBankChange">
                        <option v-for="bank in examBanks" :key="bank.examBankId" :value="bank.examBankId">
                            {{ bank.name }}
                        </option>
                    </select>
                </div>
            </div>
        </header>

        <!-- 内容区域容器 -->
        <div class="antd-layout-container">
            <!-- 左侧菜单 -->
            <aside class="antd-sidebar" :class="{ 'mobile-open': mobileMenuOpen }">
                <ul class="antd-sidebar-menu">
                    <li v-for="item in items" 
                        :key="item.link" 
                        class="antd-sidebar-menu-item"
                        :class="{ active: isActive(item.link) }">
                        <a :href="item.link">{{ item.name }}</a>
                    </li>
                </ul>
            </aside>

            <!-- 主内容区域 -->
            <main class="antd-main-content">
                <slot></slot>
            </main>
        </div>
    </div>
  `,
    data() {
        return { 
            items: navItems,
            examBanks: examBankList,
            selectedExamBankId: 101,
            mobileMenuOpen: false
        };
    },
    methods: {
        isActive(link) {
            // 使用精确匹配，避免路径包含导致的误判
            const currentPath = window.location.pathname;
            return currentPath === link;
        },
        toggleMobileMenu() {
            this.mobileMenuOpen = !this.mobileMenuOpen;
        },
        onExamBankChange() {
            // 题库改变时自动保存并刷新页面
            const oldExamBankId = localStorage.getItem("examBankId");
            const newExamBankId = String(this.selectedExamBankId);
            
            // 只有当题库真的改变时才刷新
            if (oldExamBankId !== newExamBankId) {
                localStorage.setItem("examBankId", newExamBankId);
                console.log('题库已自动保存，从', oldExamBankId, '切换到', newExamBankId);
                
                // 使用setTimeout确保localStorage已经保存
                setTimeout(() => {
                    window.location.reload();
                }, 50);
            }
        },
        initExamBank() {
            // 从 localStorage 读取题库设置
            const savedExamBankId = localStorage.getItem("examBankId");
            if (savedExamBankId) {
                this.selectedExamBankId = parseInt(savedExamBankId, 10);
            } else {
                // 如果没有保存过，设置默认值并保存
                this.selectedExamBankId = 101;
                localStorage.setItem("examBankId", "101");
            }
        }
    },
    mounted() {
        this.initExamBank();
        
        // 点击内容区域关闭移动端菜单
        document.addEventListener('click', (e) => {
            if (this.mobileMenuOpen && !e.target.closest('.antd-sidebar') && !e.target.closest('.antd-menu-toggle')) {
                this.mobileMenuOpen = false;
            }
        });
    }
};

// 自动挂载逻辑
document.addEventListener('DOMContentLoaded', () => {
    // 检查是否存在挂载点
    if (document.querySelector('#nav-bar-container')) {
        // 创建专用 Vue 实例
        new Vue({
            el: '#nav-bar-container',
            components: { 'antd-layout': AntdLayoutComponent },
            template: '<antd-layout><div id="page-content-slot"></div></antd-layout>'
        });
        
        // 将原有的 #main 移动到新布局中（不移动其子元素，保持Vue实例绑定）
        setTimeout(() => {
            const mainContent = document.querySelector('#main');
            const slotTarget = document.querySelector('#page-content-slot');
            if (mainContent && slotTarget) {
                // 直接移动整个#main元素，而不是其子元素
                // 这样可以保持Vue实例的绑定
                slotTarget.appendChild(mainContent);
                mainContent.style.display = 'block';
            }
        }, 100);
    }
});
